<template>
  <div style="padding-left: 30px; padding-right: 30px">
    <el-button type="text" @click="$refs.refLunchSysMenu.show()"><el-icon><SetUp /></el-icon>
      {{ htmlBtnSysMenu }}</el-button>

    &nbsp;&nbsp;

    <el-button type="text" @click="$refs.refLunchMenuManage.show()"><el-icon><Memo /></el-icon>
      {{ htmlBtnMenuManagement }}</el-button>

    &nbsp;&nbsp;

    <el-button type="text" @click="startChooseLunch" :disabled="doing" v-if="menus.length > 0"><el-icon><VideoPlay /></el-icon>{{ htmlBtnStart }}</el-button>
    <el-divider />

    <div style="margin-top: 11px">
      <el-tag size="large" v-for="item in menus" :effect="`${selected === item.name ? 'dark' : ''}`" style="margin-left: 11px; margin-top: 8px">{{ item.name }}</el-tag>
    </div>

    <el-dialog v-model="resultDialogVisible" :title="htmlResultTitle" width="500" center>
    <div style="text-align: center; width: 100%; line-height: 60px; font-size: 20px; color: #67C23A">
      {{ selected }}
    </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="warning" @click="resultDialogVisible=false; startChooseLunch()">
            <el-icon><Refresh /></el-icon>
            {{ htmlBtnReDraw }}
          </el-button>
          <el-button type="primary" @click="resultDialogVisible = false">{{ htmlBtnConfirm }}</el-button>
        </div>
      </template>
    </el-dialog>

    <LunchSysMenu ref="refLunchSysMenu" @confirm="saveMenus"></LunchSysMenu>
    <LunchMenuManage ref="refLunchMenuManage" :data="menus" @confirm="saveMenus"></LunchMenuManage>
  </div>
</template>

<script>
import { SetUp, VideoPlay, Refresh, Memo } from '@element-plus/icons-vue'
import LunchService from "@/service/LunchService"
import LunchSysMenu from "@/components/game/LunchSysMenu.vue"
import LunchMenuManage from "@/components/game/LunchMenuManage.vue"
export default {
  name: 'Lunch',
  components: { SetUp, LunchSysMenu, VideoPlay, Refresh, Memo, LunchMenuManage },
  data () {
    return {
      selected: '',
      menus: [],
      doing: false,
      resultDialogVisible: false,
      htmlBtnSysMenu: chrome.i18n.getMessage('lunchContentSysMenuBtn'),
      htmlBtnStart: chrome.i18n.getMessage('commonBtnStart'),
      htmlResultTitle: chrome.i18n.getMessage('lunchContentResultTitle'),
      htmlBtnConfirm: chrome.i18n.getMessage('commonBtnConfirm'),
      htmlBtnReDraw: chrome.i18n.getMessage('lunchContentBtnReDraw'),
      htmlBtnMenuManagement: chrome.i18n.getMessage('lunchContentBtnMenuManage')
    }
  },
  methods: {
    /**
     * 加载菜单.
     */
    loadMenus() {
      LunchService.getMenus((menus) => {
        console.log('get lunch menus:', menus)
        let arrMenu = []
        if (typeof menus === 'object') {
          let keys = Object.keys(menus)
          for (let i = 0; i < keys.length; i++) {
            let key = keys[i]
            arrMenu.push({
              name: menus[key].name
            })
          }
        }
        this.menus = arrMenu
      })
    },
    /**
     * 保存菜单.
     * @param data
     */
    saveMenus(data) {
      console.log('save menus:', data)
      LunchService.saveMenus(data)
      this.loadMenus()
    },
    /**
     * 开始选择菜品.
     */
    startChooseLunch() {
      this.selected = ''
      let matchNum = -1
      const maxSize = this.menus.length
      this.doing = true
      // 先执行特殊效
      let lightNum = 0
      let makeVirtualLight = () => {
        this.selected = this.menus[lightNum].name
        console.log('先中采品：', this.selected)
        if (matchNum === lightNum) {
          this.resultDialogVisible = true
          this.doing = false
          return
        }
        lightNum++;
        if (lightNum >= maxSize) {
          lightNum = 0
        }
        setTimeout(makeVirtualLight, 50)
      }
      makeVirtualLight()

      // 真实命中计算
      setTimeout(() => {
        matchNum = Math.floor(Math.random() * maxSize);
        console.log('match number:', matchNum)
      }, maxSize * 50 * 2.5)
    }
  },
  mounted() {
    this.loadMenus()
  }
}
</script>

<style scoped>

</style>